<template>
  <view style="padding-bottom: 160rpx;">
    <u-navbar
      v-if="!$isWeixin()"
      :title="title"
      :titleBold="true"
      :background="{ backgroundColor: '#ffffff' }"
      :is-fixed="true"
    ></u-navbar>

    <u-tabs active-color="#FF7A23" :list="tabList" :current="tabIndex" @change="index => (tabIndex = index)"></u-tabs>

    <view v-if="tabIndex === 0">
      <u-cell-group>
        <u-cell-item title="效果图片" :border-bottom="false" :arrow="false" style="padding-bottom: 0;"></u-cell-item>
        <u-cell-item :arrow="false" style="padding: 10rpx">
          <image-upload v-model="form.EffectList" :multiple="true" uploadText="添加效果图"></image-upload>
        </u-cell-item>
        <u-cell-item :arrow="false" title="实景图片" :border-bottom="false" style="padding-bottom: 0;"></u-cell-item>
        <u-cell-item :arrow="false" style="padding: 10rpx">
          <real-image-upload v-model="form.RealList" :multiple="true"></real-image-upload>
        </u-cell-item>

        <block v-if="countCharacterOccurrences(state.Double_Dealer_BaseInfo.Account, 'D') < 2">
          <u-cell-item title="分销文件" :arrow="false" :border-bottom="false" style="padding-bottom: 0;"></u-cell-item>
          <u-cell-item :arrow="false" style="padding: 10rpx;">
            <image-upload v-model="distributionImageList" @change="onDistributionImageChange"></image-upload>
          </u-cell-item>
          <u-cell-item :arrow="false" style="padding: 10rpx;">
            <file-picker v-model="distributionFileList" @change="onDistributionFileChange"></file-picker>
          </u-cell-item>
        </block>
        <!-- <u-cell-item :arrow="false" title="精选专卖店">
					<u-radio-group v-model="form.IsExclusive">
						<u-radio :name="1">是</u-radio>
						<u-radio :name="2">否</u-radio>
					</u-radio-group>
				</u-cell-item> -->

        <u-cell-item :arrow="false" title="审核状态" :value="state.StoreRenovationApplyInfo.StateName"></u-cell-item>
        <review-flow :data="state.AuditForList"></review-flow>
      </u-cell-group>

      <u-gap height="40" bg-color="#f5f5f5"></u-gap>

      <u-cell-group>
        <!-- <u-cell-item title="申请类型" :border-bottom="false" :arrow="false">
					<u-radio-group :disabled="true" v-model="form.ApplyType">
						<u-radio name="1">门店动力金</u-radio>
						<u-radio name="2">渠道补贴</u-radio>
					</u-radio-group>
				</u-cell-item> -->
      </u-cell-group>

      <u-cell-item title="审核流品牌" :arrow="false" :border-bottom="false" required>
        <u-radio-group v-model="form.Aub_Brand">
          <view class="grid-2">
            <u-radio :label-size="26" :name="5">八喜</u-radio>
            <u-radio :label-size="26" :name="6">夏贝</u-radio>
            <u-radio :label-size="26" :name="7">德地氏</u-radio>
            <u-radio :label-size="26" :name="8">伯爵</u-radio>
            <u-radio :label-size="26" :name="0">无</u-radio>
          </view>
        </u-radio-group>
      </u-cell-item>
      <u-cell-item :arrow="false" style="padding: 0 30rpx;">
        <view style="color: red; text-align: left;">
          请选择审核流品牌，此选项是根据所选品牌指定对应审核流，选择“无”代表无需根据品牌判断使用指定审核流，在所选品牌查找不到审核流信息时，会查询所有审核流中的第一条做为审核流程
        </view>
      </u-cell-item>
      <apply-form ref="applyForm"></apply-form>
    </view>

    <view class="" v-if="tabIndex === 1">
      <u-cell-item title="一级经销商名称" :arrow="false" :value="state.First_Dealer_BaseInfo.Name"></u-cell-item>
      <u-cell-item
        :border-bottom="false"
        title="二级经销商名称"
        :arrow="false"
        :value="state.Double_Dealer_BaseInfo.Name"
      ></u-cell-item>
      <store-information :data="state.Door_Dealer_BaseInfo"></store-information>
    </view>

    <view class="btn-group-fixed">
      <u-button :disabled="btnDisabled" type="warning" @click="submit">保存提交</u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      btnDisabled: false,
      title: '费用申请',
      tabList: [{ name: '专卖店信息' }, { name: '基本信息' }],
      tabIndex: 0,

      distributionFileList: [],
      distributionImageList: [],

      state: {
        Door_Dealer_BaseInfo: {},
        Double_Dealer_BaseInfo: {},
        EffectList: [],
        First_Dealer_BaseInfo: {},
        RealList: [],
        ShowLevel: null,
        StoreRenovationApplyInfo: {},
        This_Dealer_OtherInfo: {},
        This_Dealer_RelationList: []
      },

      form: {
        DealerId: null,
        IsExclusive: null,
        ApplyFile: '',
        ApplyType: '',
        ApplicationDate: null,
        ApplicationRemake: '',
        EffectList: [],
        RealList: [],
        Aub_Brand: '',
        Contract_PhotoList: [],
        Distribution_PhotoList: []
      }
    };
  },

  onLoad(options) {
    if (options.DealerId) {
      this.form.DealerId = options.DealerId;
    }

    if (options.ApplyForType) {
      this.form.ApplyType = options.ApplyForType;

      if (options.ApplyForType == 1) {
        this.title = '动力金申请';
      }
      if (options.ApplyForType == 2) {
        this.title = '渠道补贴申请';
      }
    }

    this.getData();

    if (this.$isWeixin()) {
      this.$setTitle(this.title);
    }
  },

  methods: {
    countCharacterOccurrences(str, char) {
      if (!str) {
        return 0;
      }

      // 使用正则表达式匹配字符出现的次数
      const regex = new RegExp(char, 'g');
      const count = (str.match(regex) || []).length;
      return count;
    },

    onDistributionImageChange(list) {
      const initialPhotoList = [];
      if (this.distributionFileList.length > 0) {
        initialPhotoList.push(...this.distributionFileList);
      }
      initialPhotoList.push(...list);
      this.form.Distribution_PhotoList = initialPhotoList;
    },

    onDistributionFileChange(list) {
      const initialPhotoList = [];
      if (this.distributionImageList.length > 0) {
        initialPhotoList.push(...this.distributionImageList);
      }
      initialPhotoList.push(...list);
      this.form.Distribution_PhotoList = initialPhotoList;
    },

    submit() {
      let me = this;
      me.btnDisabled = true;
      const applyForm = this.$refs.applyForm;
      this.form.ApplicationDate = applyForm.form.ApplyTime;
      this.form.ApplicationRemake = applyForm.form.Remark;

      console.log(this.form);
      this.$u.api.saveStoreRenovationApply(this.form).then(res => {
        const { ResultCode, ResultMessage } = res;
        if (ResultCode === 1) {
          this.$u.toast(ResultMessage);
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        } else {
          me.btnDisabled = false;
        }
      });
    },

    backToList() {
      uni.navigateBack();
    },

    getData() {
      this.$u.api
        .getInitStoreRenovationApply({
          DealerId: this.form.DealerId,
          SelectType: this.form.ApplyType
        })
        .then(res => {
          const { ResultCode, ResultData } = res;
          if (ResultCode === 1) {
            this.state = ResultData;
            this.form.EffectList = this.state.EffectList;
            this.form.RealList = this.state.RealList;

            if (this.state.Distribution_PhotoList) {
              this.form.Distribution_PhotoList = this.state.Distribution_PhotoList;
              this.distributionImageList = this.form.Distribution_PhotoList.filter(item => item.TypeId == 1);
              this.distributionFileList = this.form.Distribution_PhotoList.filter(item => (item.TypeId = 4));
            }
          }
        });
    },

    onFileChange(list, name) {
      const file = list[list.length - 1].file;
      this.$fileUpload(file).then(res => {
        console.log(res);
        this.state[name].push({
          Value: res.key
        });
      });
    },

    deleteFile(index, name) {
      uni.showModal({
        title: '提示',
        content: '您确定要删除此项吗？',
        success: async res => {
          if (res.confirm) {
            this.state[name].splice(index, 1);
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/.u-list-item {
  margin: 0 !important;
}
</style>
